<template>
	<view class="">
		<!-- 导航栏顶部 -->
		<view class="nav">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="false"
				:background="background" :back-text-style="{color: '#fff'}" :title="title">
				<view v-if="Login" class="navbar-right" slot="right">
					<view class="dot-box right-item">
						<u-icon name="setting" size="38" @click="toUserSetting"></u-icon>
					</view>

				</view>
			</u-navbar>
		</view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10 u-p-t-30">
				<u-avatar :src="avatar" mode="circle" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" v-if="Login">
				<view class="u-font-18 u-p-b-20">{{nickName}}</view>
				<view class="u-font-14 u-tips-color" v-if="isLogin" @click="toUserInfo">
					完善个人资料，获取优质服务
					<u-icon name="arrow-right" color="#969799" size="28" @click="toUserInfo"></u-icon>
				</view>
			</view>
			<view v-else>
				<navigator url="../login/index">
					<view class="nickname regist-login">
						登录/注册
					</view>
				</navigator>
				<button></button>
			</view>
		</view>
		<!-- 我的页面——司机 -->
		<driver-index></driver-index>
	</view>
</template>

<script>
	import driverIndex from './driver/driverIndex.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			driverIndex
		},
		data() {
			return {
				title: '同城物流',
				// 背景
				background: {
					backgroundColor: '#f8f8f8',

					// 导航栏背景图
					//background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				Login:'',
			}
		},
		computed: {
			...mapGetters([
				'role',
				'isLogin',
				'avatar',
				'nickName',
			])
		},
		created() {
			this.Login=this.isLogin
		},
		onShow() {
			let user = uni.getStorageSync("token");
			if(user ==''){
				this.Login =false;
				this.$store.dispatch("userInfo/GETLOGIN",user);
			}
		},
		methods: {
			// 转到个人资料界面
			toUserInfo() {
				uni.navigateTo({
					url: './user-info',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 转到系统设置界面
			toUserSetting() {
				uni.navigateTo({
					url: './user-info',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #000000;
		display: flex;
	}

	.nickName {
		color: #6a5018;
		font-size: 18px;
		font-weight: bold;
	}

	.regist-login {
		margin-left: 60upx;
		margin-top: 30upx;
	}
</style>
